The most important tags in HTML are tags that define headings, paragraphs and line breaks.

The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.


--------------------------------------------------------------------------------

Try it Yourself - Examples
A very simple HTML document
This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how the text inside a body element is displayed in the browser. 

Simple paragraphs
This example demonstrates how the text inside paragraph elements are displayed in the browser. 

More Examples


--------------------------------------------------------------------------------

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
 

HTML automatically adds an extra blank line before and after a heading.


--------------------------------------------------------------------------------

Paragraphs
Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>
 

HTML automatically adds an extra blank line before and after a paragraph.


--------------------------------------------------------------------------------

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>
 

The <br> tag is an empty tag. It has no closing tag.


--------------------------------------------------------------------------------

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

<!--This is a comment-->
 

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.


--------------------------------------------------------------------------------

Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The HTML Character Entities
 
--------------------------------------------------------------------------------
 
Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text.

To display a less than sign (<) in HTML, we have to use a character entity.


--------------------------------------------------------------------------------

Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). 

To display a less than sign in an HTML document we must write: &lt; or &#60; 

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Note that the entities are case sensitive. 

This example lets you experiment with character entities: Character Entities


--------------------------------------------------------------------------------

Non-breaking Space
The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.


--------------------------------------------------------------------------------

The Most Common Character Entities:
Result Description Entity Name Entity Number 
  non-breaking space &nbsp; &#160; 
< less than &lt; &#60; 
> greater than &gt; &#62; 
& ampersand &amp; &#38; 
" quotation mark &quot; &#34; 
' apostrophe    &#39; 

Some other Commonly Used Character Entities:
Result Description Entity Name Entity Number 
 cent &cent; &#162; 
 pound &pound; &#163; 
 yen &yen; &#165; 
 section &sect; &#167; 
 copyright &copy; &#169; 
 registered trademark &reg; &#174; 
 multiplication &times; &#215; 
 division &divide; &#247; 

To see a full list of HTML character entities go to our HTML Entities Reference. 


--------------------------------------------------------------------------------
  
Jump to: Top Of Page or HOME 


--------------------------------------------------------------------------------

We Help You For Free. You Can Help Us!
Tell your newsgroup or mailing list 
Link to us from your pages 
Help us correct errors and broken links 
Help us with spelling and grammar 
Validate the XHTML code of this page 

--------------------------------------------------------------------------------

  
All information on this site is for training only. We do not warrant its correctness or its fitness to be used. The risk of using it remains entirely with the user.

Copyright  1999-2001 by Refsnes Data. All Rights Reserved.


--------------------------------------------------------------------------------
  How we converted to XHTML    
 
 
More Tutorials:

HTML  XHTML
XML  XSL
CSS  DTD
WAP  WML
JavaScript
DHTML  Flash
VBScript  ASP
SQL  AppML

 

News: 

The Future of
Programming 

Web Security 
Browser News 
Web Standards 

 

References: 

HTML 4.01 Ref 
XHTML 1.0 Ref 
WML 1.1 Ref 
CSS Reference 
XSLT Elements 
ASCII Reference 
Entity Reference 

HTML Colors 
Color Values 
Color Names 

WAP Pages 

 

Validation: 

HTML  XHTML
CSS  DTD
XML  WML

 

 

Best Developer
Site on the Web 

1 million hits/day 

Please link to us 

Advertise here 

<script language=i 
 Examples
Create hyperlinks
This example demonstrates how to create links in an HTML document. 

An image as a link
This example demonstrates how to use an image as a link. 

More Examples 


--------------------------------------------------------------------------------

The Anchor Tag and the Href Attribute
HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor: 

<a href="url">Text to be displayed</a>
 

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>
 

The line above will look like this in a browser:

Visit W3Schools!


--------------------------------------------------------------------------------

The Target Attribute
With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<table width="1Examples
Vertical frameset
This example demonstrates how to make a vertical frameset with three different documents. 

Horizontal frameset
This example demonstrates how to make a horizontal frameset with three different documents. 

More Examples 


--------------------------------------------------------------------------------

Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents 
It is difficult to print the entire page 

--------------------------------------------------------------------------------

The Frameset Tag
The <frameset> tag defines how to divide the window into frames 
Each frameset defines a set of rows or columns 
The values of the rows/columns indicates the amount of screen area each row/column will occupy 

--------------------------------------------------------------------------------

The Frame Tag
The <frame> tag defines what HTML document to put into each frame 
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
 


--------------------------------------------------------------------------------

Basic Notes - Useful Tips
If the frames have visible borders, the user can resize the frames by dragging the border. To prevent the user from doing this, you can add the attribute noresize to the <frame> tags.

Add the <noframes> tag for browsers that do not support frames.


--------------------------------------------------------------------------------

More Examples
Mixed frameset
This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns. 

Navigation frame
This example demonstrates how to make a navigation frame. The navigation frame contains a list of links with the second frame as a target. The second frame shows the linked document. 

Inline frame
This example demonstrates how to create an inline frame (a frame inside an HTML page). 

Jump to a specified section within a frame
This example demonstrates two frames. One of the frames has a source to a specified section in a file. The specified section is made with <a name="C10"> in the link.htm file. 

Jump to a specified section with frame navigation
This example demonstrates two frames. The navigation frame to the left contains a list of links with the second frame as a target. The second frame shows the linked document. One of the links in the navigation frame is linked to a specified section in the target file. The HTML code in the file content.htm looks like this: <a href ="link.htm" target ="showframe">Link without Anchor</a><br><a href ="link.htm#c10" target ="showframe">Link with Anchor</a>. 


--------------------------------------------------------------------------------

Frame Tags:
NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Start Tag NN IE W3C Purpose 
<frameset> 3.0 3.0 4.0 Defines a set of frames 
<frame> 3.0 3.0 4.0 Defines a sub window (a frame) 
<noframes> 3.0 3.0 4.0  Defines a noframe section for browsers that do not handle frames 
<iframe>   3.0 4.0  Defines an inline sub window (frame) 
text will be reformatted every time t
What is an HTML File?
HTML stands for Hyper Text Markup Language 
An HTML file is a text file containing small markup tags 
The markup tags tell the Web browser how to display the page 
An HTML file must have an htm or html file extension 
An HTML file can be created using a simple text editor 

--------------------------------------------------------------------------------

Do You Want to Try It?
If you are running Windows, start Notepad and type in the following text:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
 

Save the file as "c:\mypage.htm". 

Start your Internet browser and type "c:\mypage.htm" in the browser's address field, and the browser will display the page.


--------------------------------------------------------------------------------

Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

The text between the <body> tags, is the text that will be displayed in your browser.

The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.

The text between the <b> 

HTML Tags
HTML tags are used to mark-up HTML elements 
HTML tags are surrounded by the two characters < and > 
The surrounding characters are called angle brackets 
HTML tags normally come in pairs like <b> and </b> 
The first tag in a pair is the start tag, the second tag is the end tag 
The text between the start and end tags is the element content 
HTML tags are not case sensitive, <b> means the same as <B> 

--------------------------------------------------------------------------------

HTML Elements
Remember the HTML example from the previous page:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
 

This is an HTML element:

<b>This text is bold</b>
 

The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

<body>
This is my first homepage. <b>This text is bold</b>
</body>
 

This HTML element starts with the start tag <body>, and ends with the end tag </body>.

The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.


--------------------------------------------------------------------------------

Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: <B> means the same as <b>. When you surf the Web, you will notice that most tutorials use uppercase HTML tags in their examples. We always use lowercase tags. Why?

If you want to prepare yourself for the next generations of HTML you should start using lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.


--------------------------------------------------------------------------------

Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.
This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">.

This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.


--------------------------------------------------------------------------------

Quote Styles, "red" or 'red'?
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:

name='John "ShotGun" Nelson'




